﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="calender,layer"></script>
    <script src="../scripts/common.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />
    
<h3 class="spliter">其他</h3>
<div class="row">
    <div class="row-inline">
        <label>周日第一天</label>
        <input class="rayui-input" id="calender30" type="text" placeholder="周日第一天" />
    </div>
    <div class="row-inline">
        <label>时分秒间隔</label>
        <input class="rayui-input" id="calender31" type="text" placeholder="时分秒间隔" />
    </div>
    <div class="row-inline">
        <label>只显确定按钮</label>
        <input class="rayui-input" id="calender32" type="text" placeholder="只显示确定按钮" />
    </div>
</div>

    <h3 class="spliter">标记+节假日</h3>
    <div class="row">
        <div class="row-inline">
            <label>生日时间</label>
            <input class="rayui-input" id="calender20" type="text" placeholder="生日" />
        </div>
        <div class="row-inline">
            <label>节假日</label>
            <input class="rayui-input" id="calender21" type="text" placeholder="节假日" />
        </div>
        <div class="row-inline">
            <label>生日+节假日</label>
            <input class="rayui-input" id="calender22" type="text" placeholder="生日+节假日" />
        </div>
    </div>

    <h3 class="spliter">外围控制</h3>
    <div class="row">
        <div class="row-inline">
            <label>最小日期</label>
            <input class="rayui-input" id="calender10" type="text" placeholder="当前时间" />
            <a class="rayui-btn btn-primary btn-2x" id="btn10">设置最小日期为2018-05-10</a>
        </div>
    </div>
    <div class="row">
        <div class="row-inline">
            <label>最大日期</label>
            <input class="rayui-input" id="calender11" type="text" placeholder="当前时间" />
            <a class="rayui-btn btn-primary btn-2x" id="btn11">设置最大日期为2018-05-25 12:20:30</a>
        </div>
    </div>
    <div class="row">
        <div class="row-inline">
            <label>起始日期</label>
            <input class="rayui-input" id="calender12" type="text" placeholder="开始时间" />-
            <input class="rayui-input" id="calender12-1" type="text" placeholder="结束时间" />
        </div>
    </div>
    <div class="row">
        <div class="row-inline">
            <label>添加标记</label>
            <input class="rayui-input" id="calender13" type="text" placeholder="开始时间" />
            <a class="rayui-btn btn-primary btn-2x" id="btn13-1">添加两个节日</a>
            <a class="rayui-btn btn-primary btn-2x" id="btn13-2">移除五四青年节</a>
        </div>
    </div>

    <h3 class="spliter">input</h3>
    <div class="row">
        <div class="row-inline">
            <label>初始赋值</label>
            <input class="rayui-input" id="calender1" type="text" placeholder="当前时间" />
        </div>
        <div class="row-inline">
            <label>双击弹出</label>
            <input class="rayui-input" id="calender2" type="text" placeholder="dblclick" />
        </div>
        <div class="row-inline">
            <label>最小日期</label>
            <input class="rayui-input" id="calender3" type="text" placeholder="2018-05-10 12:23:10" />
        </div>
        <div class="row-inline">
            <label>最大日期</label>
            <input class="rayui-input" id="calender4" type="text" placeholder="2018-05-25 13:12:11" />
        </div>
        <div class="row-inline">
            <label>日期只读</label>
            <input class="rayui-input" id="calender5" type="text" placeholder="不允许输入" readonly="readonly" />
        </div>
        <div class="row-inline">
            <label>点我弹出</label>
            <input class="rayui-input" id="calender6" type="text" placeholder="点我无效" readonly="readonly" />
        </div>
        <div class="row-inline">
            <label>选择时间</label>
            <input class="rayui-input" id="calender7" type="text" placeholder="时间" readonly="readonly" />
        </div>
    </div>

    <h3 class="spliter">自定义格式</h3>
    <div id="container2" class="row">
        <div class="row-inline" data-type="year" data-text="年" data-placeholder="yyyy年"></div>
        <div class="row-inline" data-type="month" data-text="年月" data-placeholder="yyyy年MM月"></div>
        <div class="row-inline" data-type="date" data-text="日期" data-placeholder="yyyy年MM月dd日"></div>
        <div class="row-inline" data-type="time" data-text="时间" data-placeholder="HH时mm分ss秒"></div>
        <div class="row-inline" data-type="datetime" data-text="日期+时间" data-placeholder="yyyy年MM月dd日 HH时mm分ss秒"></div>
        <div class="row-inline" data-type="datetime" data-text="日月年" data-placeholder="dd/MM/yyyy"></div>
    </div>


    <h3 class="spliter">默认格式</h3>
    <div id="container1" class="row">
        <div class="row-inline" data-type="year" data-text="年" data-placeholder="yyyy"></div>
        <div class="row-inline" data-type="month" data-text="年月" data-placeholder="yyyy-MM"></div>
        <div class="row-inline" data-type="date" data-text="日期" data-placeholder="yyyy-MM-dd"></div>
        <div class="row-inline" data-type="time" data-text="时间" data-placeholder="HH:mm:ss"></div>
        <div class="row-inline" data-type="datetime" data-text="日期+时间" data-placeholder="yyyy-MM-dd HH:mm:ss"></div>
    </div>


    <h3 class="spliter">直接显示</h3>
    <div id="container">
        <div class="con-panel" type="year"></div>
        <div class="con-panel" type="month"></div>
        <div class="con-panel" type="date"></div>
        <div class="con-panel" type="time"></div>
        <div class="con-panel" type="datetime"></div>
        <style>
            #container .con-panel {
                margin: 10px;
                display: inline-block;
            }
        </style>
    </div>


<script>

    rayui.ready(function () {

        var calender = rayui.calender,
            layer = rayui.layer,
            scope = {};

        scope.init32 = function () {
            var cldInsStart = calender.render({
                elem: '#calender32',
                type: "date",
                firstDayOfWeek: 0,
                toolBtns: ["ok"],
                toolBtnTextes: {
                    ok: "OK"
                },
            });
        }

        scope.init31 = function () {
            var cldInsStart = calender.render({
                elem: '#calender31',
                type: "time",
                firstDayOfWeek: 0,
                timeHours: 2,
                timeMinutes: 5,
                timeSeconds: 6
            });
        }

        scope.init30 = function () {
            var cldInsStart = calender.render({
                elem: '#calender30',
                type: "date",
                firstDayOfWeek: 0
            });
        }

        scope.init22 = function () {
            var cldInsStart = calender.render({
                elem: '#calender22',
                type: "date",
                mark: {
                    "0-5-2": { tip: "回家" },//无颜色
                    "0-5-6": { tip: "返程", dotColor: "#00f" },
                    "0-5-15": { tip: "生日", dotColor: "#009688" },
                    "0-5-25": { dotColor: "#009688" },
                    "0-5-28": { tip: "结婚", dotColor: "#009688" },
                    "0-6-5": { dotColor: "#f00"}
                },
                holiday: {
                    "0-04-28": { type: 0 },
                    "0-04-29": { type: 1 },
                    "0-04-30": { type: 1 },
                    "0-05-01": { tip: "劳动", type: 1 },
                    "0-05-15": { tip: "暴雨", type: 1 }, //日期重合，tip两个显示mark
                    "0-05-25": { tip: "大雨", type: 1 }, //日期重合，tip一个显示holiday
                    "0-05-27": { tip: "补班", type: 0 },
                    "0-05-28": { type: 1 },//日期重合，tip一个显示mark
                    "0-6-5": { type: 1 }//日期重合，tip0个，显示日期
                }
            });
        }

        scope.init21 = function () {
            var cldInsStart = calender.render({
                elem: '#calender21',
                type: "date",
                holiday: {
                    "0-04-28": { type: 0 },
                    "0-04-29": { type: 1 },
                    "0-04-30": { type: 1 },
                    "0-05-01": { tip: "劳动", type: 1 },
                    "0-05-25": { tip: "大雨", type: 1 },
                    "0-05-27": { tip: "补班", type: 0 }
                }
            });
        }

        scope.init20 = function () {
            var cldInsStart = calender.render({
                elem: '#calender20',
                type: "date",
                mark: {
                    "0-5-15": { tip: "生日", dotColor: "#009688" }
                }
            });
        }

        scope.init13 = function () {
            var cldIns = calender.render({
                elem: '#calender13',
                type: "date"
            });
            $("#btn13-1").click(function () {
                cldIns.addMark({
                    "0-5-4": { tip: "青年", dotColor: "#f00" },
                    "0-6-1": { tip: "儿童", dotColor: "#ff0" }
                });
            });
            $("#btn13-2").click(function () {
                cldIns.removeMark("0-5-4");
            });
        }

        scope.init12 = function () {
            var cldInsStart = calender.render({
                elem: '#calender12',
                type: "date"
            });
            var cldInsEnd = calender.render({
                elem: '#calender12-1',
                type: "date"
            });
            cldInsStart.on("pick", function (datestring) {
                cldInsEnd.setMinDatetime(datestring);
                cldInsEnd.show();
            });
            cldInsEnd.on("pick", function (datestring) {
                cldInsStart.setMaxDatetime(datestring);
            });
        }

        scope.init11 = function () {
            var cldIns = calender.render({
                elem: '#calender11',
                type: "datetime"
            });
            $("#btn11").click(function () {
                cldIns.setMaxDatetime("2018-05-25 12:20:30");
            });
        }

        scope.init10 = function () {
            var cldIns = calender.render({
                elem: '#calender10',
                type: "datetime"
            });
            $("#btn10").click(function () {
                cldIns.setMinDatetime("2018-05-10");
            });
        }

        scope.init7 = function () {
            calender.render({
                elem: '#calender7',
                type: "time"
            });
        }

        scope.init6 = function () {
            calender.render({
                elem: '#calender6',
                eventElem: $('#calender6').siblings(),
                type: "date"
            });
        }

        scope.init5 = function () {
            calender.render({
                elem: '#calender5',
                type: "datetime"
            });
        }

        scope.init4 = function () {
            calender.render({
                elem: '#calender4',
                type: "datetime",
                maxDatetime: "2018-5-25 13:12:11"
            });
        }

        scope.init3 = function () {
            calender.render({
                elem: '#calender3',
                type: "datetime",
                minDatetime: "2018-5-10 12:23:10"
            });
        }

        scope.init2 = function () {
            calender.render({
                elem: '#calender2',
                type: "date",
                event: $('#calender2').prop("placeholder")
            });
        }

        scope.init1 = function () {
            calender.render({
                elem: '#calender1',
                type: "datetime",
                selectedDate: "2018-5-9 14:23:22",
                toolBtns: ["now"]
            });
        }

        function initContainer2() {
            $('#container2').find('div').each(function () {
                var $this = $(this),
                    $input = $('<input type="text" class="rayui-input" placeholder="' + $this.data("placeholder") + '"/>')
                        .appendTo($this);
                $this.prepend('<label>' + $this.data("text") + '</label>');
                calender.render({
                    type: $this.data("type"),
                    elem: $input,
                    format: $this.data("placeholder")
                });
            });
        }

        function initContainer1() {
            $('#container1').find('div').each(function () {
                var $this = $(this),
                    $input = $('<input type="text" class="rayui-input" placeholder="' + $this.data("placeholder") + '"/>')
                        .appendTo($this);
                $this.prepend('<label>' + $this.data("text") + '</label>');
                calender.render({
                    type: $this.data("type"),
                    elem: $input
                });
            });
        }

        function initContainer() {
            $('#container').find('.con-panel').each(function () {
                $(this).append('<h3 class="spliter">' + $(this).attr("type") + '</h3>');
                calender.render({
                    type: $(this).attr("type"),
                    container: $(this)
                });
            });
        }


        initContainer();
        initContainer1();
        initContainer2();
        var index = 1;
        while (index < 100) {
            var func = scope["init" + (index++)];
            typeof func === "function" && func();
        }

    });

</script>


    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：
调用方法 var calenderIns = calender.render(option);

属性：
elem://元素，一般为input输入框
eventElem://事件触发元素
container://容器
type: 'date', //控件类型，支持：year/month/date/time/datetime，默认date
readOnly: false, //是否只读
event: "click", //触发方式
autoPick: true, //是否自动选择
selectedDate: //选择时间，可用来做初始值设置
firstDayOfWeek: 1, //周的第一天 0表示星期日 1表示星期一
format: 'yyyy-MM-dd', //默认日期格式
mark: {},//标记，可选：object，object格式(key-value键值对)：key为date日期，value包含tip提示语(不写默认点)、
            color颜色(不填默认灰色)，例如：{"0-3-1": {tip: "生日", color:"#ff0000"}}，表示3月1号生日，用红色标记
holiday: {},//节假日+补班，可选：object，object格式(key-value键值对)：key为date日期，value包含tip提示语(不写默认点)、
            type(0加班1休班)，例如：{"0-10-01": {tip: "国庆", type: 1}}，表示10月1号国庆休班
minDatetime: new Date(),//最小可选时间，date
maxDatetime: new Date(),//最大可选时间，date
animSpeed: 300,//动画时间，显示的时候
timeHours: 1,//数值或数值数组，时间之时间隔
timeMinutes: 1,//数值或数值数组，时间之分间隔
timeSeconds: 1,//数值或数值数组，时间之秒间隔
toolBtns: ["clear", "now", "ok"],
skin：皮肤支持，暂时未做
//下面是国际化支持参数
toolBtnTextes: {
    clear: "清除",
    now: "现在",
    ok: "确定"
},
weeks: ['日', '一', '二', '三', '四', '五', '六'],
monthes: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],//月份
datetime: ['年', '月', '日', '时', '分', '秒'],
showTimeText: "选择时间",
backDateText: "返回日期"


属性事件：
onPick：function(datatimestring)： datatimestring返回选中的字符串
onShow：function() ：控件显示时触发
onHide：function() ：控件隐藏时触发


calender方法：
render：function(options)：type可选select|ul，container可填可不填，填写可以实现渲染指定容器内的select


calenderIns方法：
on：function (event, callback)：
                event：现在支持pick、show、hide事件
                callback：function(datatimestring)：datatimestring返回选中的字符串
show: function()：显示控件
hide: function()：隐藏控件
setMinDatetime: function(datetime)：设置最小可选日期时间，datetime为字符串，比如："2018-05-17"、"2018/05/17"
setMaxDatetime: function(datetime)：设置最大可选日期时间，datetime为字符串，比如："2018-05-17"、"2018/05/17"
addMark: function (marks)：添加标记，marks格式和参数mark一致
removeMark: function (markstrs)：移除标记，markstrs为字符串或则字符串数组，比如："0-10-01"、["0-10-01","0-10-02"]
clearMark: function ()：清空所有标记
addHoliday: function (holidays)：添加节假日，holidays格式和参数holiday一致
removeHoliday: function (holidaystrs)：移除节假日，holidaystrs为字符串或则字符串数组，比如："0-10-01"、["0-10-01","0-10-02"]
clearHoliday: function ()：清空节假日


</pre>

</body>
</html>